<template>
  <el-button type="primary" style="width: 100%; padding: 35px 0; font-size: 28px" @click="writeBlog">
    <el-icon :size="28">
      <i-edit/>
    </el-icon>
    <span style="margin-left: 15px;">写博客</span>
  </el-button>
  <el-table :data="blogList">
    <el-table-column prop="name" label="标题"/>
    <el-table-column prop="datetime" label="发布时间">
      <template #default="scope">
        {{ dateFormat(scope.row.datetime) }}
      </template>
    </el-table-column>
    <el-table-column prop="tag" label="标签">
      <template #default="scope">
        <el-tag v-for="tag in scope.row.tag" style="text-align: center; margin-right: 2px; width: 45px">{{ tag }}
        </el-tag
        >
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.row.id)">
          编辑
        </el-button>
        <el-button size="mini" type="danger"
                   @click="deleteModal = true; deleteId = scope.row.id">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination background layout="prev, pager, next" :total="blogTotalCount" v-model:current-page="currentPage"
                   :page-size="pageSize">
    </el-pagination>
  </div>
  <el-dialog v-model="editModal">
    <el-form v-model="formData" label-position="top">
      <el-row :gutter="2" justify="space-between">
        <el-col :span="11">
          <el-form-item label="标题">
            <el-input type="hidden" v-model="formData.id"/>
            <el-input type="text" :maxlength="20" show-word-limit v-model="formData.name"/>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="标签">
            <el-select style="width: 100%" v-model="formData.tag" multiple>
              <el-option
                  v-for="item in ['Hot', 'New', 'Top']"
                  :key="item"
                  :label="item"
                  :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="摘要" style="width: 100%">
          <el-input v-model="formData.desc"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item style="width: 100%" label="文章">
          <el-input resize="none" :input-style="{fontSize: '19px', lineHeight: '26px'}" type="textarea" rows="10"
                    v-model="formData.content"/>
        </el-form-item>
      </el-row>
      <el-form-item>
        <el-button @click="editModal = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="deleteModal" width="30%">
    <span>确认删除?</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteModal = false">取消</el-button>
        <el-button type="danger" @click="handleDelete(this.deleteId)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import store from '../store'
import {Edit} from "@element-plus/icons-vue";

export default {
  name: "BlogManage",
  setup() {
    return {
      Edit
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      editModal: false,
      deleteModal: false,
      deleteId: 0,
      formData: {
        id: undefined,
        name: String(),
        tag: Array(),
        desc: String(),
        content: ''
      }
    }
  },
  computed: {
    blogList() {
      return store.getters.getCurrentPageContent(this.currentPage, this.pageSize)
    },
    blogTotalCount() {
      return store.getters.getTotal
    },
  },
  methods: {
    dateFormat(timestamp) {
      return new Date(timestamp * 1000).toLocaleString()
    },
    blogDetail(id) {
      return store.getters.getBlogDetail(Number(id))
    },
    handleEdit(id) {
      const blogData = this.blogDetail(id)
      this.formData.id = blogData.id
      this.formData.content = blogData.content.join('\n')
      this.formData.name = blogData.name
      this.formData.tag = blogData.tag
      this.formData.desc = blogData.desc
      this.editModal = true
    },
    handleDelete(id) {
      this.deleteModal = true
      store.commit('removeBlog', id)
      this.deleteModal = false
    },
    writeBlog() {
      this.formData.id = undefined
      this.formData.content = ''
      this.formData.tag = []
      this.formData.desc = ''
      this.formData.name = ''
      this.editModal = true
    },
    handleSave() {
      let blogDetail = {
        content: this.formData.content.split('\n')
      }
      let blogInfo = {
        tag: this.formData.tag,
        datetime: Math.trunc(new Date().getTime() / 1000),
        desc: this.formData.desc,
        name: this.formData.name
      }
      if (this.formData.id !== undefined) {
        // 更新博客 （有id）
        blogInfo.id = this.formData.id
        blogDetail.id = this.formData.id
        store.commit('updateBlogInfo', blogInfo)
        store.commit('updateBlogDetail', blogDetail)
      } else {
        // 新增博客 （没有id）
        const id = store.getters.getAllBlog[store.getters.getTotal - 1].id + 1 ?? 1
        blogInfo.id = id
        blogDetail.id = id
        store.commit('addBlogInfo', blogInfo)
        store.commit('addBlogDetail', blogDetail)
      }
      this.editModal = false
    }
  }
}
</script>

<style scoped>

</style>